<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件基础</title>
    <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <!-- 组件调用 start-->
    <button-counter title="title1 : " @clicknow="clicknow">
        <!-- 组件调用 end-->
        <!-- slot 插槽，用来插入任意的html元素和标签-->
        <h2>hi...h2</h2>
    </button-counter>
    <button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
    // 创建组件 start
    Vue.component('button-counter', {
        props: ['title'],
        data: function () {
            return {
                count: 0
            }
        },
        // 模板内容
        template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
        methods: {
            clickfun: function () {
                this.count++;
                // 子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：
                this.$emit('clicknow', this.count);
            }
        }
    })
    // 创建组件 end
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            clicknow: function (e) {
                console.log(e);
            }
        }
    });
</script>
<style type="text/css">

</style>
</body>
</html>
